<template>
  <div class="chooseWithDraw">
    <x-header class="header" :left-options="{showBack: showHeaderBack,preventGoBack:true}" @on-click-back="goToPage" ref="header">选择要取酒水</x-header>
    <div class="topHolder"></div>
    <group>
      <cell title="您所在房台号" inline-desc="(酒水将取到该台)" :value="choosenTableText" ></cell>
    </group>
    <group title="存酒列表：(勾选想要取出酒水)">
      <x-table :cell-bordered="false" class="keppListTable">
        <checker v-model="selectedItems" type="checkbox" default-item-class="checkboxItem" selected-item-class="checkboxItem_selected" disabled-item-class="checkboxItem_disabled">
          <thead>
          <tr style="background-color: #F7F7F7">
            <th width="15%"></th>
            <th width="57%">存酒信息</th>
            <th width="22%">过期时间</th>
          </tr>
          </thead>
            <tbody>
              <tr v-for="(item,index) in personKeepList" :key="index" class="item" :class="[{noSelect:!item.selectable}]">
                <td>
                  <checker-item :value="item" :disabled="!item.selectable"><i class='iconfont icon-caozuochenggong'></i></checker-item>
                </td>
                <td class="content">
                  <h5 class="title" v-text="item.NAME"></h5>
                  <p class="desc" v-if="item.WHOLE == 1">
                    <span class="number">
                      数量：<inline-x-number v-model="item.choosenNumber" :max="item.QUANTITY" :min="1" width="30px" button-style="round"></inline-x-number>
                    </span>
                    【<span style="color: #0086b3;">整支</span>】最大可取数量：<span v-text="item.QUANTITY"></span>
                  </p>
                  <p class="desc" v-if="item.WHOLE == 0">【<span style="color: #0abd39;">单支</span>】剩余：<span v-text="item.SCALE"></span>CM </p>
                  <p class="desc" v-if="!item.selectable" style="color: red;">(今日不可取该类酒水)</p>
                </td>
                <td class="expire" v-text="item.EXPIRE_DATETIME"></td>
              </tr>
              <tr v-if="personKeepList.length <= 0">
                <td colspan="3">
                  <div class="listNoItem">暂无存酒</div>
                </td>
              </tr>
            </tbody>
        </checker>
      </x-table>
    </group>
    <box gap="1rem 0.8rem">
      <x-button :gradients="['#1D62F0', '#19D5FD']" @click.native="submit" :show-loading="loadingStatus" :disabled="loadingStatus" text="确认取出"></x-button>
    </box>
    <br/>
  </div>
</template>

<script>
  import { Group, Cell, XTable, InlineXNumber, Checker, CheckerItem, Box, XButton } from 'vux'
  import {getChoosenTable,getPersonKeepList,withDrawKeepWine} from "../../api";
  import {message} from "../../common/util";

  export default {
    name:'chooseWithDraw',
    data(){
      return{
        showHeaderBack:this.GLOBAL.showHeaderBack,
        loadingStatus:false,
        paramTableId:this.$route.params.tableId,
        choosenTableText:'',
        personKeepList:[],
        selectedItems:[]
      }
    },
    components:{
      Group,
      Cell,
      XTable,
      InlineXNumber,
      Checker,
      CheckerItem,
      Box,
      XButton
    },
    computed:{
    },
    methods:{
      goToPage(){
        this.$router.push({path:'/keepServices'})
      },
      submit(){
        if(this.selectedItems.length <= 0){
          message({message:'请先勾选要取的酒水',type:'error'})
          return
        }
        let reqParams = {
          selectedItems:this.selectedItems,
          tableId:this.paramTableId
        }
        //console.log(reqParams)
        this.$vux.confirm.show({
          title:'确认取酒',
          content:'请确认是否取出所选酒水？',
          onCancel: ()=> {
            this.loadingStatus = false
          },
          onConfirm: ()=> {
            withDrawKeepWine(reqParams).then((res)=>{
              if(res.status == 'success'){
                message({message:'您已确认取出酒水',type:'info'})
                this.$router.push({path:'/keepServices'})
                this.loadingStatus = false
              }else if(res.status == 'error') {
                message({message:res.msg,type:'error'})
                console.log('withDrawKeepWine error info:', res.msg)
              }
            }).catch((err)=>{console.log('withDrawKeepWine catch info:',err)})
          }
        })
      }
    },
    mounted(){
      getChoosenTable(this.paramTableId).then((res)=>{
        if(res.status == 'success'){
          this.choosenTableText = res.data.AREA + '-' + res.data.NUMBER + '（' + res.data.ROOM_PLATFORM_TYPE + '）'
          getPersonKeepList().then((res)=>{
            if(res.status == 'success'){
              this.personKeepList = res.data
              for(var i = 0; i < this.personKeepList.length; i++){
                this.personKeepList[i].choosenNumber = 1
              }
              this.loadingStatus = false
            }else if(res.status == 'error') {
              message({message:res.msg,type:'error'})
              console.log('getPersonKeepList error info:', res.msg)
            }
          }).catch((err)=>{console.log('getPersonKeepList catch info:',err)})
        }else if(res.status == 'error') {
          message({message:res.msg,type:'error'})
          console.log('getChoosenTable error info:', res.msg)
        }
        this.$store.commit('updateLoadingStatus',{isLoading:false})
      }).catch((err)=>{console.log('getChoosenTable catch info:',err)})
    }
  }
</script>

<style lang="scss" scoped>
  .chooseWithDraw{
    .keppListTable{
      .item{
        .checkboxItem {
          width:2rem;height:2rem;color: #acacac;padding-top: 0.3rem;
          .iconfont{font-size:1.8rem;}
        }
        .checkboxItem_selected{color: #FF3B3B;}
        .checkboxItem_disabled{color: #e8e8e8;}
        .content{
          text-align: left;
          h5.title{font-size: 0.9rem;}
          p.desc{
            font-size: 0.9rem;
            .number{
              display: block;margin: 0.3rem 0;
              .vux-inline-x-number{vertical-align: bottom;}
            }
          }
        }
        .expire{font-size: 0.9rem;}
        &.noSelect{color: #acacac;}
      }
    }
  }
</style>
